﻿@{
    Layout = "_TemplateInterfaceLayout";
}
<!--头部开始-->
<div class="header">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a>
        </div>
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default" aria-label="Left Align">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            </button>
        </form>
    </div>
</div>
<!--头部结束-->
<!--图片轮播开始-->
<div class="banner">
    <div>
        <div class="ag7-bannerslide carousel">
            <ul class="slidebox">
                <li><a href="#" target="_blank"><img alt="龙潭游玩" src="images/carousel/banner01.jpg"></a></li>
                <li><a href="#" target="_blank"><img alt="光凌摄影协会活动" src="images/carousel/banner02.jpg"></a></li>
                <li><a href="#" target="_blank"><img alt="电信系学生会活动" src="images/carousel/banner03.jpg"></a></li>
                <li><a href="#" target="_blank"><img alt="校园献血" src="images/carousel/banner04.jpg"></a></li>
            </ul>
            <div class="slideinfo">
                <div class="slidetitle">
                    <h2></h2>
                    <h3 class="activity-describe"></h3>
                </div>
                <div class="slidelist">
                    <ul>
                        <li data-h1="龙潭游玩" data-h2="我想在每个人的青春年岁里，都曾有过一段关于旅行的憧憬，一段说走就走的旅行。可是在现实里，因为种种的原因，这个美好的希冀变成了每个午夜梦回的美好梦想。">
                            <img width="50" height="22" src="images/carousel/banner01.jpg"></a>
                        </li>
                        </li>
                        <li data-h1="光凌摄影协会活动" data-h2="我想在每个人的青春年岁里，都曾有过一段关于旅行的憧憬，一段说走就走的旅行。可是在现实里，因为种种的原因，这个美好的希冀变成了每个午夜梦回的美好梦想。">
                            <img width="50" height="22" src="images/carousel/banner02.jpg"></a>
                        </li>
                        </li>
                        <li data-h1="电信系学生会活动" data-h2="我想在每个人的青春年岁里，都曾有过一段关于旅行的憧憬，一段说走就走的旅行。可是在现实里，因为种种的原因，这个美好的希冀变成了每个午夜梦回的美好梦想。">
                            <img width="50" height="22" src="images/carousel/banner03.jpg"></a>
                        </li>
                        </li>
                        <li data-h1="校园献血" data-h2="我想在每个人的青春年岁里，都曾有过一段关于旅行的憧憬，一段说走就走的旅行。可是在现实里，因为种种的原因，这个美好的希冀变成了每个午夜梦回的美好梦想，一段说走就走的旅行。可是在现实里，因为种种的原因，这个美，一段说走就走的旅行。可是在现实里，因为种种的原因，这个美，一段说走就走的旅行。可是在现实里，因为种种的原因，这个美，一段说走就走的旅行。可是在现实里，因为种种的原因，这个美，一段说走就走的旅行。可是在现实里，因为种种的原因，这个美好的希冀变成了每个午夜梦回的美好梦想。">
                            <img width="50" height="22" src="images/carousel/banner04.jpg"></a>
                        </li>
                        </li>
                    </ul>
                    <div class="mask">
                        <span class="mask-top"></span>
                        <span class="mask-left"></span>
                        <span class="mask-bottom"></span>
                        <span class="mask-right"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--图片轮播结束-->
<!--内容区-->
<div class="activity">
    <div class="container">
        <!--活动介绍开始-->
        <div class="row reduce-margin">
            <div class="row">
                <div class="bb-grids">
                    <a href="#" class="thumbnail effect-bubba">
                        <figcaption>
                            <h2>Smart Name</h2>
                            <p>有的旅行是为了拓宽眼界，浏览风景名胜。有的旅行是为了体验生活，感悟人生。有的旅行时为了寻找逝去的年华，重温青春的惆怅。而有的旅行是释放负面情绪，换个心情，轻装上阵。</p>
                        </figcaption>
                        <img src="images/img1.jpg" alt="">
                    </a>
                </div>
                <div class="bb-grids">
                    <a href="#" class="thumbnail effect-bubba">
                        <figcaption>
                            <h2>Smart Name</h2>
                            <p>有的旅行是为了拓宽眼界，浏览风景名胜。有的旅行是为了体验生活，感悟人生。有的旅行时为了寻找逝去的年华，重温青春的惆怅。而有的旅行是释放负面情绪，换个心情，轻装上阵。</p>
                        </figcaption>
                        <img src="images/img2.jpg" alt="">
                    </a>
                </div>
                <div class="bb-grids">
                    <a href="#" class="thumbnail effect-bubba">
                        <figcaption>
                            <h2>Smart Name</h2>
                            <p>有的旅行是为了拓宽眼界，浏览风景名胜。有的旅行是为了体验生活，感悟人生。有的旅行时为了寻找逝去的年华，重温青春的惆怅。而有的旅行是释放负面情绪，换个心情，轻装上阵。</p>
                        </figcaption>
                        <img src="images/img3.jpg" alt="">
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="bb-grids">
                    <a href="#" class="thumbnail effect-bubba">
                        <figcaption>
                            <h2>Smart Name</h2>
                            <p>有的旅行是为了拓宽眼界，浏览风景名胜。有的旅行是为了体验生活，感悟人生。有的旅行时为了寻找逝去的年华，重温青春的惆怅。而有的旅行是释放负面情绪，换个心情，轻装上阵。</p>
                        </figcaption>
                        <img src="images/img4.jpg" alt="">
                    </a>
                </div>
                <div class="bb-grids">
                    <a href="#" class="thumbnail effect-bubba">
                        <figcaption>
                            <h2>Smart Name</h2>
                            <p>有的旅行是为了拓宽眼界，浏览风景名胜。有的旅行是为了体验生活，感悟人生。有的旅行时为了寻找逝去的年华，重温青春的惆怅。而有的旅行是释放负面情绪，换个心情，轻装上阵。</p>
                        </figcaption>
                        <img src="images/img5.jpg" alt="">
                    </a>
                </div>
                <div class="bb-grids">
                    <a href="#" class="thumbnail effect-bubba">
                        <figcaption>
                            <h2>Smart Name</h2>
                            <p>有的旅行是为了拓宽眼界，浏览风景名胜。有的旅行是为了体验生活，感悟人生。有的旅行时为了寻找逝去的年华，重温青春的惆怅。而有的旅行是释放负面情绪，换个心情，轻装上阵。</p>
                        </figcaption>
                        <img src="images/img6.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="introduce-ac">
            <a href="#">如果你感觉孤独，请放下你的顾忌，融入我们!!</a>
            <p> 没有人是喜欢等待的，但等待是人生的常态，很多事情没结果之前只能等待，在一切还没有变好之前，我们只能学会等待，看书、健身、旅行、工作，总之你得先成为自己喜欢的样子，你要的人才会来遇见你。 </p>
        </div>
        <div class="end-activity">
            <div class="d-titel">
                <span class="x-titel"></span><h3 class="h3-titel">已经结束的活动</h3>
            </div>
            <div class="row reduce-margin">
                <div class="bb-grids featur-grids">
                    <div class="ac-introduce feature-thmbnl">
                        <h4>Gilla frinreet</h4>
                        <img src="images/img7.jpg" alt="">
                        <div class="caption">
                            <h5><a href="#">Aliquam erat volutpat</a><a></a></h5>
                            <a><p>Donec vitae tellus non sem vulputate cursus. Aliquam erat volutpat. Proin ut est et sem rhoncus fringilla laoreet</p></a>
                            <a href="#" class="btn-See">查看</a>
                        </div>
                    </div>
                </div>
                <div class="bb-grids featur-grids">
                    <div class="ac-introduce  feature-thmbnl">
                        <h4>Gilla frinreet</h4>
                        <img src="images/img8.jpg" alt="">
                        <div class="caption">
                            <h5><a href="#">Aliquam erat volutpat</a><a></a></h5>
                            <a><p>Donec vitae tellus non sem vulputate cursus. Aliquam erat volutpat. Proin ut est et sem rhoncus fringilla laoreet</p></a>
                            <a href="#" class="btn-See">查看</a>
                        </div>
                    </div>
                </div>
                <div class="bb-grids featur-grids">
                    <div class="ac-introduce  feature-thmbnl">
                        <h4>Gilla frinreet</h4>
                        <img src="images/img9.jpg" alt="">
                        <div class="caption">
                            <h5><a href="#">Aliquam erat volutpat</a><a></a></h5>
                            <a><p>Donec vitae tellus non sem vulputate cursus. Aliquam erat volutpat. Proin ut est et sem rhoncus fringilla laoreet</p></a>
                            <a href="#" class="btn-See">查看</a>
                        </div>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
        <!--活动介绍结束-->
        <!--社团列表开始-->
        <div class=" as-back">
            <h3 class="h3-titel"><a href="#" class="as-a">社团列表</a></h3>
            <div class="posts">
                <div class="media-as">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object thumbnail" src="images/img11.jpg" alt="">
                        </a>
                    </div>
                    <div class="media-con">
                        <h4 class="media-heading"><a href="#">光凌摄影协会</a></h4>
                        <h5>人数 17, 2014</h5>
                    </div>
                </div>
                <div class="media-as">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object thumbnail" src="images/img11.jpg" alt="">
                        </a>
                    </div>
                    <div class="media-con">
                        <h4 class="media-heading"><a href="#">光凌摄影协会</a></h4>
                        <h5>人数 17, 2014</h5>
                    </div>
                </div>
                <div class="media-as">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object thumbnail" src="images/img11.jpg" alt="">
                        </a>
                    </div>
                    <div class="media-con">
                        <h4 class="media-heading"><a href="#">光凌摄影协会</a></h4>
                        <h5>人数 17, 2014</h5>
                    </div>
                </div>
            </div>
            <div class="posts">
                <div class="media-as">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object thumbnail" src="images/img11.jpg" alt="">
                        </a>
                    </div>
                    <div class="media-con">
                        <h4 class="media-heading"><a href="#">光凌摄影协会</a></h4>
                        <h5>人数 17, 2014</h5>
                    </div>
                </div>
                <div class="media-as">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object thumbnail" src="images/img11.jpg" alt="">
                        </a>
                    </div>
                    <div class="media-con">
                        <h4 class="media-heading"><a href="#">光凌摄影协会</a></h4>
                        <h5>人数 17, 2014</h5>
                    </div>
                </div>
                <div class="media-as">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object thumbnail" src="images/img11.jpg" alt="">
                        </a>
                    </div>
                    <div class="media-con">
                        <h4 class="media-heading"><a href="#">光凌摄影协会</a></h4>
                        <h5>人数 17, 2014</h5>
                    </div>
                </div>
            </div>
            <div class="posts">
                <div class="media-as">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object thumbnail" src="images/img11.jpg" alt="">
                        </a>
                    </div>
                    <div class="media-con">
                        <h4 class="media-heading"><a href="#">光凌摄影协会</a></h4>
                        <h5>人数 17, 2014</h5>
                    </div>
                </div>
                <div class="media-as">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object thumbnail" src="images/img11.jpg" alt="">
                        </a>
                    </div>
                    <div class="media-con">
                        <h4 class="media-heading"><a href="#">光凌摄影协会</a></h4>
                        <h5>人数 17, 2014</h5>
                    </div>
                </div>
                <div class="media-as">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object thumbnail" src="images/img11.jpg" alt="">
                        </a>
                    </div>
                    <div class="media-con">
                        <h4 class="media-heading"><a href="#">光凌摄影协会</a></h4>
                        <h5>人数 17, 2014</h5>
                    </div>
                </div>
            </div>
        </div>
        <!--社团列表结束-->
    </div>
</div>
